<template>
  <div class="box">
    <div class="top-1">
      <span class="iconfont icon-fangxiang-xiangzuo" @click="goHome"> </span>
      <div class="nav-mid">猫眼电影</div>
    </div>
    <div>
      <input type="text" placeholder="请输入手机号" v-model="user" />
      <button class="btn_msg">发送验证码</button>
    </div>
    <input type="password" placeholder="请输入短信验证码" v-model="code" />
    <button class="login_btn" @click="loginFn">登录</button>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      user: "",
      code: "",
    };
  },
  methods: {
    loginFn() {
      sessionStorage.setItem("user", this.user);
      this.$router.push("/me");
    },
    goHome() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less" scoped>
.iconfont {
  font-size: 0.8rem;
  position: absolute;
  z-index: 9;
  color: #fff;
  line-height: 1.333333rem;
  left: 0.266667rem;
}
.nav-mid {
  width: 100%;
  color: #fff;
  font-size: 0.48rem;
  text-align: center;
  height: 1.333333rem;
  line-height: 1.333333rem;
  background: #e54847;
  position: relative;
}
.top-1 {
  position: fixed;
  z-index: 9;
  width: 100%;
  top: 0px;
}
.box {
  margin-top: 3.2rem;
}
input {
  width: 8.933333rem;
  height: 0.8rem;
  outline: none;
  border: none;
  font-size: 0.426667rem;
  margin-left: 0.533333rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 0.533333rem;
}
input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.btn_msg {
  border: none;
  background: none;
  color: rgba(0, 0, 0, 0.3);
  font-size: 0.426667rem;
  position: absolute;
  width: 2.666667rem;
  left: 262px;
  line-height: 1.866667rem;
}
.login_btn {
  width: 8.933333rem;
  height: 1.333333rem;
  border-radius: 0.533333rem;
  border: none;
  font-size: 0.426667rem;
  margin-left: 0.533333rem;
  margin-top: 0.533333rem;
  color: #999;
}
</style>